<template>
  <el-dialog @open="openDialog" :title="isAdd?'新增':'编辑'" :visible="dialogFormVisible" @close="closeDialog">

    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.beizhu"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-tree
           ref="tree"
          :data="permission"
          :show-checkbox="true"
          :node-key="'id'"
          :default-checked-keys="form.selectPermissionIds"
          :default-expand-all="true"
          :props="{children: 'children',label: 'title'}">
        </el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddRoleDialog",
  props:{
    dialogFormVisible:{
      type:Boolean,
      default:false
    },
    record:{
      type:Object,
      default:{}
    }
  },

  data(){
    return {
      permission:[],
      form:{
        name: '',
        beizhu:'',
        selectPermissionIds:[],
      },
      rules:{
        name:[
          { required: true, message: '必填', trigger: 'blur' }
        ],
        selectPermissionIds: [
          {required: true, type: 'array', message: '至少选择一个权限', trigger: ['change', 'blur']}
        ],
      },
      host:process.env.VUE_APP_BASE_API
    }
  },

  methods:{
    onSubmit(){
      this.form.selectPermissionIds = this.$refs.tree.getCheckedKeys()
      if(this.form.selectPermissionIds.length<=0){
        this.$message.error('请选择一个权限！')
        return
      }
      this.$myHttpPost(this.$myUrl.rbac.role.add,this.form).then(res=>{
        this.$message.success(res.msg)
        this.$emit('success',false)
      })
    },
    cancel(){
      this.$emit('cancelDialog',false)
      Object.assign(this.$data.form, this.$options.data().form)
    },
    closeDialog(){
      this.cancel()
    },

    /*
    * axios返回一个 Promise 对象
    * 如果有连续几个请求是有顺序要求的，可以使用这种写法
    * const { data } = await this.$myHttpGet(this.$myUrl.rbac.permission.lst)
    *
    * 如果就一个请求，可以不需要 await，直接使用 then(res=>{...})处理回调即可
    *
    * */


    async openDialog(){
      this.initAddDialog()
      const { data } = await this.$myHttpGet(this.$myUrl.rbac.permission.lst)
      this.permission = data.records
    },
    initAddDialog(){
      this.permission = []
      Object.assign(this.$data.form, this.$options.data().form)
      if(!this.isAdd){
        this.form.id = this.record.id
        this.form.name = this.record.name
        this.form.beizhu = this.record.beizhu
        this.form.selectPermissionIds = this.record.permission_ids.split(',')
      }
    }
  },
  computed: {
    isAdd: function() {
      return Object.keys(this.record).length<=0;
    }
  },

}
</script>

<style scoped>

</style>
